<template>
    <div class="content mt10">
        <div v-for="item in table_columns" class="card">
            <div class="card-title">{{ item.label }}</div>
            <div class="footer">
                <div>{{ state[item.key] }}</div>
                <div>
                    <img :src="item.url" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { $request } from '@/utils/request.js';
import img1 from '../../../assets/images/Group.png';
import img2 from '../../../assets/images/Group2.png';
import img3 from '../../../assets/images/Group3.png';
import img4 from '../../../assets/images/Group4.png';
const { t } = useI18n();
let state = ref({
    num_of_assign_message: 0,
    num_of_reply_conversion: 0,
    num_of_reply_rate: '0%',
    num_of_success: 0
});
const table_columns = ref([
    {
        label: t('basics.assignedAmount'),
        key: 'num_of_assign_message',
        url: img1
    },
    {
        label: t('basics.sucessfullySent'),
        key: 'num_of_success',
        url: img2
    },
    {
        label: t('basics.numberOfReplies'),
        key: 'num_of_reply_conversion',
        url: img3
    },
    {
        label: t('basics.ResponseRate'),
        key: 'num_of_reply_rate',
        url: img4
    }
]);
const getPageInfo = () => {
    $request.get('/client/sonUserProject/getNum').then((res) => {
        state.value = res;
    });
};
getPageInfo();
</script>
<style lang="less" scoped>
.content {
    display: flex;
    justify-content: space-between;
    .card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        width: 24.2%;
        height: 220px;
        background: @bg-color;
        border-radius: 10px;
        padding: 28px;
        .card-title {
            font-weight: 500;
            font-size: 28px;
        }
        .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 500;
            font-size: 54px;
            img {
                width: 64px;
                height: 66px;
                position: relative;
                top: 6px;
            }
        }
    }
}
</style>
